<template>
	<div class="commentTemplate">
		<el-card shadow="hover">
			<div class="comment-template mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="80px" class="demo-form-inline">
					<el-row>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 25px">
									<el-button type="success" @click="toAdd">新增评价模板</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ (page.current - 1) * 10 + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="productId" label="模板" show-overflow-tooltip align="center" />
				<el-table-column prop="createTime" label="模板创建时间" show-overflow-tooltip align="center" />
				<el-table-column fixed="right" label="操作" width="90px">
					<template #default="scope">
						<el-button text type="primary" @click="toEdit(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog v-model="addDialogVisible" :close-on-click-modal="false" :title="title" width="800px">
			<el-form :model="ruleForm" label-width="90px">
				<el-form-item prop="tempName" label="模板名称">
					<el-input maxlength="200" v-model="ruleForm.tempName" />
				</el-form-item>
				<header style="margin-bottom: 10px">
					<el-button type="primary" @click="addQuestion">新增评价项</el-button>
				</header>
				<div class="question_item">
					<el-card v-for="(item, index) in ruleForm.questionList" :key="index" shadow="hover">
						<header style="margin-bottom: 10px; display: flex; justify-content: flex-end">
							<el-button type="danger" @click="delQuestion(index)">删除问题</el-button>
						</header>
						<el-form-item prop="question" :label="`评价问题${index + 1}`">
							<el-input maxlength="200" v-model="ruleForm.questionList[index].question" />
						</el-form-item>
						<el-form-item prop="commentMethod" label="评价方式">
							<el-select v-model="ruleForm.questionList[index].commentMethod">
								<el-option v-for="option in commentMethodOptions" :key="option.value" :label="option.label" :value="option.value"> </el-option>
							</el-select>
						</el-form-item>
						<!-- 单选 -->
						<div v-if="ruleForm.questionList[index].commentMethod === 1">
							<el-button type="primary" style="margin-bottom: 10px" @click="addOption(index)">新增选项</el-button>
							<el-form-item
								prop="option"
								v-for="(item2, index2) in ruleForm.questionList[index].optionList"
								:key="index2"
								:label="`选项${index2 + 1}`"
							>
								<div class="option_wrap">
									<el-input maxlength="500" v-model="ruleForm.questionList[index].optionList[index2]" />
									<el-button type="danger" style="margin-bottom: 10px" @click="delOption(index, index2)">删除选项</el-button>
								</div>
							</el-form-item>
						</div>
						<!-- 数值 -->
						<div v-if="ruleForm.questionList[index].commentMethod === 2">
							<el-form-item prop="num" label="最大数值">
								<el-input-number v-model="ruleForm.questionList[index].num" :min="1" :max="100" />
							</el-form-item>
						</div>
					</el-card>
				</div>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" :loading="saveLoading" @click="submit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { commentMethodOptions, useInit, useAdd } from './hook';

const { page, searchForm, loading, tableData, init } = useInit();

const { addDialogVisible, ruleForm, saveLoading, title, toAdd, toEdit, addQuestion, delQuestion, addOption, delOption, submit } = useAdd(init);

const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
</script>
<style lang="scss"></style>
